<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <!-- 4. 使用局部组件 -->
      <say-hello></say-hello>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 1. 定义组件视图模板-->
  <template id="temp1">
    <div>
      这是局部组件 - {{name}}
      <button @click="fn">按钮</button>
    </div>
  </template>
  
  <script type="text/javascript">
    
    // 2. 定义局部组件对象
    var temp1 = {
      template:"#temp1",
      data(){
        return {
          name:"李四"
        }
      },
      methods:{
        fn(){
          console.log(this.name)
        }
      }
    }
    
    
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue global component"
      },
      components:{
        // 3.注册局部组件
        sayHello:temp1
      }
    })
    
    // 谁注册谁使用
  </script>
</html>
